<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { editShopApi } from '@/service/shop.js'; // 假设你有一个添加门店的 API

// 定义 emit 函数，用于触发父组件的 reload 事件
const emit = defineEmits(['reload']);

const drawerVisible = ref(false);
const ruleForm = ref({
    id: '', // 新增时不需要ID
    title: '',
    address: '',
    // 其他门店信息字段
});

const rules = ref({
    title: [
        {
            required: true,
            message: '请输入门店名称',
            trigger: 'blur'
        }
    ],
    address: [
        {
            required: true,
            message: '请输入地址',
            trigger: 'blur'
        }
    ],
    // 其他验证规则
});

// 清空表单数据
const clearForm = () => {
    ruleForm.value = {
        id: '',
        title: '',
        address: '',
        // 其他门店信息字段
    };
};

// 打开drawer
const openDrawer = (row) => {
    drawerVisible.value = true;
    ruleForm.value = { ...row }; // 填充表单数据
};

// 提交表单
const handleSubmit = async () => {
    try {
        // 修正：使用 ruleForm.value
        await editShopApi(ruleForm.value).then(({code,msg}) => {
           if (code === 200) {
                ElMessage.success(msg);
                drawerVisible.value = false; // 关闭抽屉
                // 刷新门店列表或执行其他操作
                clearForm(); // 清空表单数据
                // 调用父组件的方法，刷新门店列表
                emit('reload');
            } else {
                ElMessage.error(msg);
            }
        })
      
    } catch (error) {
        ElMessage.error('门店添加失败，请稍后重试');
    }
};

// 关闭drawer
const closeDrawer = () => {
    drawerVisible.value = false;
    clearForm(); // 调用清空表单函数
};

defineExpose({
    openDrawer,
    closeDrawer
});
</script>

<template>
    <el-drawer title="编辑门店信息" :visible.sync="drawerVisible" size="30%">
        <el-form :model="ruleForm" :rules="rules" ref="shopFormRef" label-position="top">
            <!-- 修正：将 prop 和 v-model 改为 title -->
            <el-form-item label="门店名称" prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入门店名称"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <!-- 其他表单项 -->
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
                <el-button @click="drawerVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<style scoped>
/* 样式 */
</style>
